<template>
    <div>
        <el-dialog title='教职员工基本信息表' :visible.sync="isShow" @close="onClose" width="60%">
            <div class="common-view">
                <div class="teacher-view">
                    <div style="height: 20vh">
                        <div class="title-view">
                            教师已认证信息
                        </div>
                        <div class="top-view">
                            <div class="top-teacher-view">
                                <el-image class="header-view" :src="teacherInfo.headerUrl"></el-image>
                                <div class="title-view left-view">
                                    <div>
                                        {{teacherInfo.nickName}}
                                    </div>
                                    <div style="margin-top: 10px">
                                        {{teacherInfo.technicalTitle}}
                                    </div>
                                </div>
                            </div>
                            <div class="title-view left-view">
                                <div>
                                    性别 : {{teacherInfo.gender === '0'?'女':'男'}}
                                </div>
                                <div style="margin-top: 10px">
                                    学历 : {{teacherInfo.eduLevel}}
                                </div>
                            </div>
                            <div class="title-view left-view">
                                <div>
                                    专业 : {{teacherInfo.professional}}
                                </div>
                                <div style="margin-top: 10px">
                                    类型 : 全职
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="height: 40vh">
                        <div class="title-view">
                            资格证书
                        </div>
                        <div class="top-view">
                            <el-image class="header-view1" :src="teacherInfo.certTitle"></el-image>
                            <el-image class="header-view1" :src="teacherInfo.eduCert"></el-image>
                            <el-image class="header-view1" :src="teacherInfo.eduCert2"></el-image>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getTeacherInfo} from '@/api/teacher.js'
    export default {
        props: ['isShowDialog','selectTeacherId'],
        data() {
            return {
                teacherInfo:{},
                teacherId:this.selectTeacherId,
                teacherHeaderUrl: require('../../../assets/images/teacher-header.png'),
                isShowSign: false,
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,
            }
        },
        watch: {
            selectTeacherId:{
                handler(newValue, oldValue) {
                    this.teacherId = newValue;
                },
                deep: true
            },
        },
        created() {
            this.getTeacherInfo();
        },
        computed: {},
        methods: {
            getTeacherInfo(){
                console.log(this.selectTeacherId);
                getTeacherInfo({
                    teacherId:this.selectTeacherId
                }).then((res) => {
                    console.log("教师信息如下：",res)
                    if (res.code == 200){
                        if(res.data){
                          if (res.data.image){
                            res.data.headerUrl = process.env.VUE_APP_BASE_API  + res.data.image;
                          }else{
                            res.data.headerUrl = this.teacherHeaderUrl;
                          }
                          this.teacherInfo = res.data;
                        }
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeTeacherInfo')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:15px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(60vh);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;
    }

    .teacher-view {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin: 0 10% 0 10%;

        .title-view {
            font-size: 0.09rem;
            color: black;
            font-weight: bold;
        }

        .left-view {
            margin-left: 15px;
        }

        .top-view {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            .top-teacher-view {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        text-align: center;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        text-align: center;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    .examine-view {
        color: #2b2cff;
        border-bottom: 1px solid #2b2cff;
    }

    //隐藏指定 el-table 的水平滚动条
    .hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        background-color: transparent;
    }

    .hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {
        width: 0px !important;
        border-right-width: 0;
        border-bottom-width: 0;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    .header-view {
        width: 110px;
        height: 110px;
        margin-top: 10px
    }

    .header-view1 {
        width: 100%;
        margin: 10px 10px 0 10px;
    }
</style>

